import { DeepKeys, FormAsyncValidateOrFn, FormValidateOrFn, ReactFormExtendedApi } from '@tanstack/react-form'
import classNames from 'classnames'
import { PropsWithChildren } from 'react'
import { FieldValidate } from '../common/FieldValidate'
import { Label } from '../ui/label'
import { Textarea } from '../ui/textarea'
interface Props<T> extends React.InputHTMLAttributes<HTMLTextAreaElement> {
  formObject: ReactFormExtendedApi<
    T,
    FormValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    unknown
  >
  fieldName: DeepKeys<T>
  label?: string
  rows?: number
  [key: string]: any
}

export const BmTextarea = <T extends object>({
  formObject,
  fieldName,
  label,
  rows,
  children,
  ...props
}: PropsWithChildren<Props<T>>) => {
  return (
    <formObject.Field
      name={fieldName}
      children={(field) => (
        <div>
          {label && (
            <Label htmlFor={field.name} className="mb-2">
              {label}
            </Label>
          )}
          <div
            className={classNames('grid-cols-[1fr_auto] gap-2', {
              grid: !!children
            })}>
            <Textarea
              rows={rows ?? 3}
              value={field.state.value as string}
              {...props}
              onChange={(e) => field.handleChange(e.target.value as any)}
            />
            {/* <Input
              value={field.state.value as string}
              {...props}
              onChange={(e) => field.handleChange(e.target.value as any)}
              id={field.name}
            /> */}
            {children}
          </div>
          <FieldValidate name={field.name} errors={field.state.meta.errors} />
        </div>
      )}
    />
  )
}
